<!-- 多张图片 -->
<template>
  <div class="MorePictures-page">
    <n-checkbox-group v-model:value="cities" @change="getiijwer">
      <n-grid x-gap="10" y-gap="10" cols="6">
        <n-gi>
          <div class="photoGallery-img vertical-center sz">
            <n-upload
              :action="prefixS + 'public/Upimg'"
              :data="upload"
              :onFinish="getImgs"
              accept=".jpg,.png"
            >
              <i class="iconfont dx-tupian fz30"> </i>
            </n-upload>
          </div>
        </n-gi>

        <n-gi v-for="(item, idx) in ImgArray" :key="idx">
          <div class="photoGallery-img vertical-center">
            <n-checkbox :value="item.url"> </n-checkbox>
            <p v-if="getgs(item.url)">
              <img src="../../assets/img/mt.png" />
            </p>
            <img :src="item.url" v-else />
            <i
              class="iconfont dx-shanchu img-icon-error"
              @click="delImg(item.key)"
            ></i>
          </div>
          <p class="cen pt5 pm5 ov w100">
            {{ getName(item.key) }}
          </p>
        </n-gi>
      </n-grid>
    </n-checkbox-group>
  </div>
</template>
 <script lang='ts' setup>
import { dxget, prefixS } from "../../util/index";
import { reactive, ref } from "vue";
const emit = defineEmits(["getImg"]);
const tester = "lunbo";

const props = defineProps({
  types: { type: String, default: "lunbo" },
});
let upload = reactive({
  typeName: props.types,
});
let ImgArray = ref();
const cities = ref();
const getImgs = async () => {
  let { data }: any = await dxget("public/getImg", {
    Prefix: props.types,
  });
  ImgArray.value = data;
};
getImgs();

const delImg = async (keyVal) => {
  let { errno }: any = await dxget("public/delImg", {
    key: keyVal,
  });
  if (errno == 0) {
    window.$message.success("删除成功！");
    getImgs();
  }
};
const getiijwer = (data) => {
  emit("getImg", data);
};
const getgs = (text) => {
  return text.indexOf("mp4") > 0 ? true : false;
};
const getName = (text) => {
  return text.split(props.types + "/")[1];
};
</script>
 <style scoped>
.MorePictures-page {
  min-height: 500px;
}
.jhbbse-ng {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 100;
}
</style>